<template>
    <div>
        <div class="swipered">
                <van-swipe :autoplay="3000">
                    <van-swipe-item v-for="(image, index) in images" :key="index">
                        <img v-lazy="image" />
                    </van-swipe-item>
                </van-swipe> 
        </div>
        <div class="gooddetao">
            <p class="details">{{this.txt}}</p>
            <p class="price"> ￥{{this.price}}</p>
        </div>
        <div>
            <p>服客客服客服客服客服客服客服客服客服客服客服客服客服客服客服</p>
            <p>服客客服客服客服客服客服客服客服客服客服客服客服客服客服客服</p>
            <p>服客客服客服客服客服客服客服客服客服客服客服客服客服客服客服</p>
        </div>
        <van-goods-action>
                <van-goods-action-icon icon="chat-o" text="客服"/>
                <van-goods-action-icon icon="cart-o" text="购物车"/>
                <van-goods-action-button type="warning" text="加入购物车"  @click="showcreat(0)"/>
                <van-goods-action-button type="danger" text="立即购买" @click="showcreat(1)"/>
        </van-goods-action>
        <div :class="[show===true?'to':'start']" v-if="modelshow">
            <div class="productdetails">
                <div class="imgs"><img :src="this.main_imsge"></div>
                <div class="ms">
                    <p>￥{{this.price}}</p>
                    <p>库存{{this.stock}}</p>
                    <p>请选择颜色分类</p>
                </div>
                <van-icon name="close" size="40" @click="showrevise"/>
            </div>
            <div class="colorcategory">
                <p>颜色分类</p>
                <div class="xolormx">
                    <div @click="selectcolor(index)" v-for="(color, index) in colorarr" :key="index" :class="colortype==index?'selecolor':''">{{color}}</div>
                </div>
            </div>
            <div class="buynum">
                <p>购买数量</p>
                <div class="actionnum">
                    <div>-</div>
                    <div class="numbers">{{this.quantity}}</div>
                    <div>+</div>
                </div>
            </div>
            <div class="sures" @click="buycart">确定</div>
        </div>
        <div :class="[show===true?'bggwc':'']" @touchmove.prevent></div>
    </div>
    
</template>
<script>
export default {
    name:"product",
    data(){
        return{
            ///----商品详情实体类
            images:[],       //照片组
            txt:"",
            price:"",
            stock:0,
            main_imsge:"",
            colorarr:[],    //颜色分类数组
            ///----商品详情实体类
            show: false,
            modelshow:false,
            cartorbuy:0,      ///用来判断是购物车还是直接购买
            quantity: 1,      //购买数量
            shopid : 0,       ///商品id
            colortype:0       //颜色类型
        }
    },
    mounted(){
        this.init();
    }, 
    methods:{
        init(){
            let data={
                id:this.$route.query.id.split("000cyf")[1]
            }
            ///获取商品的信息
            this.$http({
                method:"post",
                url:this.$util.baseUrl+'app/getgoodinfo',
                data:data
            }).then((res)=>{
                if(res.data.code=800000){
                    this.images = res.data.data[0].sub_images.split(",");
                    this.txt = res.data.data[0].detail;
                    this.price = res.data.data[0].price
                    this.stock = res.data.data[0].stock
                    this.main_imsge = res.data.data[0].main_image
                    this.colorarr = res.data.data[0].colorcategory.split(",")
                    this.shopid =  res.data.data[0].id
                }
            })
        },
        showcreat(e){
            this.show = !this.show;
            this.modelshow=true;
            if(e==0){
                this.cartorbuy = 0
            }else{
                 this.cartorbuy = 1
            }
        },
        showrevise(){
            this.show = !this.show;
            setTimeout(() => {
                 this.modelshow=false;
            }, 1000);
        
        },
        selectcolor(index){
            this.colortype = index
        },

        buycart(){
            ///判断是购买还是加入购物车
            if(true){
                //加入购物车
                let data={
                    userid : localStorage.getItem('userid'),
                    quantity : this.quantity,
                    shopid : this.shopid,
                    color : this.colorarr[this.colortype]
                }
                // this.$http({
                //     method:"post",
                //     url:this.$util.baseUrl+'app/addcartinfo',
                //     data:data
                // }).then((res)=>{
                //     console.log(res)
                // })
            }

        }
    }
}
</script>
<style lang="less" scoped>
    .swipered{
        width: 100%;
        .van-swipe{
            width: 100%;
            img{
            width: 100%;
            height: 700px;
            display: block;
        }  
        }
    }
    .gooddetao{
        height: 300px;
        border-bottom:1px solid #333333; 
    }
    .details{
        font-size: 38px;
        font-family: "宋体";
        color: #333333;
        padding-left: 35px;
        padding-top: 60px;
        display: inline-block;
        font-weight: 700;
    }
    .price{
        font-size: 45px;
        color: #333333;
        margin-left: 35px;
        margin-top: 40px;
        font-weight: 800;
    }
    .van-goods-action-button--first {
        margin-left: 0.4rem;
    }
    .van-goods-action-icon{
        margin-right: 15px;
    }
    .van-goods-action-button{
        height: 1.2rem;
    }
    .start{
        width: 100%;
        height: 800px;
        position: absolute;
        bottom: -800px;
        background: white;
        animation:mysecond 1s;
    }
    .to{
        width: 100%;
        height: 800px;
        position: absolute;
        bottom: 0px;
        background: white;
        animation:myfirst 1s;
        z-index: 999;
        overflow: scroll;
    }
    @keyframes myfirst
    {
        from {bottom:-800px;}
        to {bottom:0px;}
    }
    @keyframes mysecond
    {
        from {bottom:0px;}
        to {bottom:-800px;}
    }
    .bggwc{
        width: 100%;
        height: 100%;
        background: black;
        opacity: 0.6;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 555;
    }
    .productdetails{
        display: flex;
        justify-content: space-around;
        .van-icon{
            margin-top: 30px;
            margin-left: 20px;
        }
    }
    .imgs{
        width: 250px;
        height: 250px;
        background: red;
        margin-top: 30px;
        img{
            width: 250px;
            height: 250px;
            border-radius: 10px;
        }
    }
    .ms{
        margin-top: 30px;
        p{
            font-size: 35px;
            font-weight: 600;
        }
    }
    .colorcategory{
        width: 100%;
        margin-top: 30px;
        border-top:1px solid #cccccc; 
        border-bottom:1px solid #cccccc; 
        padding-bottom: 30px;
        p{
            font-size: 38px;
            padding-left: 35px;
            margin-top: 60px;
        }
        .xolormx{
            width: 90%;
            margin-top: 30px;
            margin-left:35px; 
            display: flex;
            div{
                width: 200px;
                height: 70px;
                background: #cccccc;
                border-radius: 20px;
                text-align: center;
                line-height: 70px;
                font-size: 35px;
                margin-right: 30px;
            }
            .selecolor{
                width: 200px;
                height: 70px;
                background: #00FF99;
                border-radius: 20px;
                text-align: center;
                line-height: 70px;
                font-size: 35px;
                margin-right: 30px;
            }
                
        }
    }
    .buynum{
        width: 100%;
        height: 150px;
        border-bottom: 1px solid #F0F0F0;
        display: flex;
        justify-content: space-between;
        p{
            font-size: 40px;
            line-height: 150px;
            padding-left: 35px;
        }
        .actionnum{
            display: flex;
            justify-content: space-between;
            align-items: center;
            div{
                width: 100px;
                height: 100px;
                font-size: 70px;
                background: #F0F0F0;
                text-align: center;
                line-height: 100px;
                margin-right: 30px;
            }
            .numbers{
                background: white;
            }
        }
    }
    .sures{
        width: 100%;
        height: 100px;
        background: red;
        position: absolute;
        bottom: 0;
        left: 0;
        color: white;
        font-size: 45px;
        text-align: center;
        line-height: 100px;
    }
   
</style>